<template>
  <div id="app" class="pdf_main">
    <!-- <el-tag @click="index">拖拽首页</el-tag>
    <el-tag @click="form">拖拽表单</el-tag>
    <el-tag @click="create">element表单创建器</el-tag>
    <el-button @click="but">点击</el-button>-->
    <div class="pdf_dialog_main">
      <div class="pdf_left_btn">
        <div
          @click="pageChange(-1)"
          :class="{ page_button: true, hoverClass: page > 1 }"
        >
          <i class="el-icon-arrow-left" />
        </div>
      </div>
      <div class="pdf_content" id="pdf_content" :style="'width: 800px'">
        <div
          @mousewheel="mousewheel"
          v-if="notSchema"
          style="
            padding: 10px;
            box-sizing: border-box;
            height: 782px;
            width: 578px;
          "
        >
          <div
            @mousedown="mousedown"
            @mousemove="mousemove"
            @mouseup="mouseup"
            id="pdf_div"
            class="pdf_div"
            style="width: 518px; height: 740px"
          >
            <!-- <img v-show="isError" width="500px" style="margin-top: 100px;" src="../../static/404.jpg" /> -->
            <pdf
              ref="vuePdf"
              id="vuePdf"
              :src="srcResult"
              :scale="zoom"
              :page="page"
              :onError="pdfError"
              :onLoad="pdfLoad"
              :rotate="rotateNum"
            ></pdf>
          </div>
        </div>
        <div
          v-else
          style="
            padding: 10px;
            overflow: auto;
            box-sizing: border-box;
            height: 782px;
          "
        >
          <!--<pre>{{oneFormInfo}}</pre>-->
        </div>
        <div
          class="pdf_footer"
          :style="{ 'flex-direction': notSchema ? 'row' : 'row-reverse' }"
        >
          <div class="pdfMenu" :style="{ top: '-220px' }">
            <div id="pdfRotate" @click="rotate">
              <i class="el-icon-refresh" />
            </div>
            <div id="pdfBig" @click="big">
              <i class="el-icon-plus" />
            </div>
            <div id="pdfSmall" @click="small">
              <i class="el-icon-minus" />
            </div>
          </div>
          <!--            <div class="bottom_btn" :style="ispdf?'':'width:700px'">-->
          <div class="bottom_btn">
            <el-button
              class="my-btn my-btn-primary"
              id="pdfShowPdfOrImg"
              @click="showPdfOrImg"
              type="primary"
              >返回</el-button
            >
            <el-button
              class="my-btn my-btn-default"
              id="pdfDownLoadPdf"
              @click="downLoadPdf"
              type="primary"
              >下载</el-button
            >
            <el-button
              class="my-btn my-btn-primary"
              id="pdfPrint"
              @click="print"
              type="primary"
              >打印</el-button
            >
            <el-button
              class="my-btn my-btn-primary"
              id="pdfClose"
              @click="close"
              >关闭</el-button
            >
          </div>
        </div>
      </div>
      <div class="pdf_left_btn">
        <div @click="close" class="page_button hoverClass el-close">
          <i class="el-icon-close" />
        </div>
        <div
          v-if="ispdf && !isHtml"
          @click="pageChange(1)"
          :class="{
            page_button: true,
            hoverClass: page < total,
            'page_button-right': true,
          }"
        >
          <i class="el-icon-arrow-right" />
        </div>
      </div>
    </div>
    <div class="bottom_page">
      <el-button id="pdfToPage" @click="prev">上一页</el-button>
      <el-button id="pdfToPage" @click="next">下一页</el-button>
      <el-button @click="down">下载</el-button>
    </div>
    <!-- <router-view></router-view> -->
  </div>
</template>
<script>
import pdf from "./pdfView.vue";
import http from "../../http/index";
export default {
  data() {
    return {
      notPreview: false,
      isAccept: false,
      page1: 11,
      printVisible: false,
      audio: false,
      page: 1,
      total: 1,
      loadedRatio: 0,
      isError: false,
      isHtml: false,
      width: 518,
      height: 752,
      zoom: 1,
      rotateNum: 0,
      srcResult: `/static/JavaScript_reg.pdf`, // 支持 arraybuffer 后端读取 返回二进制 然后设置对应链接 展示
      pdfurlname: null,
      loading: false, // 加载中
      notSchema: true, // 为true表示目前没有在查表
      haveSchema: false, // 是否有填表
      showBack: true, // 是否显示返回按钮
      schemaUuid: "", // 用于查表的条件
      oneFormInfo: {}, // 查表查到的信息
      printing: false,
      download: false,
      target: null,
      point: {
        x: 0,
        y: 0,
      },
      materialTemplateContent: {}, // acceptance传过来的材料的额外信息内容
      receiptMark: false,
      showDelete: false,
    };
  },
  methods: {
    mousedown: function (e) {
      this.target = e.currentTarget;
      this.point = {
        x: e.clientX,
        y: e.clientY,
      };
    },
    down: function () {
      // console.log(but)
      this.$nextTick((_) => {
        this.downloadPDF(document.getElementById("pdf_content"));
      });
      // window.but();
    },
    mousemove: function (e) {
      if (this.target) {
        this.target.scrollTop =
          this.target.scrollTop - (e.clientY - this.point.y);
        this.target.scrollLeft =
          this.target.scrollLeft - (e.clientX - this.point.x);

        this.point = {
          x: e.clientX,
          y: e.clientY,
        };
      }
    },
    mouseup: function () {
      this.target = null;
    },
    mousewheel: function (e) {
      e.wheelDelta < 0 ? this.small() : this.big();
    },
    small: function () {
      this.zoom += 0.2;
      if (this.zoom > 1.8) {
        this.zoom = 1.8;
      }
    },
    big: function () {
      this.zoom -= 0.2;
      if (this.zoom < 0.2) {
        this.zoom = 0.2;
      }
    },
    rotate: function () {
      this.rotateNum += 90;
      if (this.rotateNum === 360) {
        this.rotateNum = 0;
      }
    },
    deleteFile: function () {
      this.$emit("deleteHandler", this.materialName);
    },
    show: function (uuid, materialTemplateContent, showDelete = false) {
      this.showDelete = showDelete;
      if (uuid) {
        this.schemaUuid = uuid;
        this.haveSchema = true;
        this.materialTemplateContent = materialTemplateContent;
        this.getschema();
      } else {
        this.haveSchema = false;
      }
      this.page = 1;
      this.isError = false;
      this.printVisible = true;
    },
    close: function () {
      this.zoom = 1;
      this.rotateNum = 0;
      this.page = 1;
      this.isError = false;
      this.printVisible = false;
      this.audio = false;
      this.srcResult = "";
      if (this.isAccept) {
        if (this.getAcceptAffair) {
          this.getAcceptAffair();
        }
        this.isAccept = false;
      }
      // const flag = Array.from(['examine', 'onLineCheck']).map(item => this.$route.path.indexOf(item)).some(item => item > -1)
      // if (!flag) {
      //   this.reload()
      // }
    },
    print: function () {
      this.$refs.vuePdf.print();
      // if (this.src) {

      //   if (this.isHtml) {
      //     var el = document.getElementById("pdf_html_div");
      //     var iframe = document.createElement("IFRAME");
      //     var doc = null;
      //     iframe.setAttribute(
      //       "style",
      //       "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
      //     );
      //     document.body.appendChild(iframe);
      //     doc = iframe.contentWindow.document;
      //     doc.write(
      //       '<LINK rel="stylesheet" type="text/css" href="css/print.css">'
      //     );

      //     // el.innerHTML.replace('<table width="718px;" border="0" cellspacing="0" cellpadding="0" style="border-collapse:separate;border:none;padding:0;margin:0;table-layout:fixed;">', '<div style="height: 100%"><table width="718px;" border="0" cellspacing="0" cellpadding="0" style="border-collapse:separate;border:none;padding:0;margin:0;table-layout:fixed;">').replace('</table>', '</table></div>')
      //     doc.write("<div>" + el.innerHTML + "</div>");

      //     doc.close();
      //     iframe.contentWindow.focus();
      //     iframe.contentWindow.print();
      //     if (navigator.userAgent.indexOf("MSIE") > 0) {
      //       document.body.removeChild(iframe);
      //     }
      //   } else {
      //     this.$refs.vuePdf.print();
      //   }
      // } else {
      //   // this.$message.error('无PDF打印。')
      // }
    },
    pdfLoad: function (pdfDoc) {
      this.loading = false;
      console.log(this);
      this.total = pdfDoc.numPages;
      this.pdfurlname = pdfDoc.fingerprint;
    },
    pageChangeHandler: function (page) {
      console.log(page);
      this.page = page;
    },
    pageChange: function (value) {
      if (this.total) {
        this.page += value;
        if (this.page < 1) {
          this.page = 1;
        } else if (this.page > this.total) {
          this.page = this.total;
        }
      }
    },
    progress: function (a) {
      this.loadedRatio = a;
    },
    toPage: function () {
      const jump = document
        .getElementById("pdf_page")
        .getElementsByClassName("el-pagination__jump")[0];
      if (jump) {
        const input = jump.getElementsByTagName("input")[0];
        if (input) {
          this.page = parseInt(input.value);
        }
      }
    },
    next() {
      if (this.page <= this.total) {
        this.page = this.page + 1;
        this.$refs.vuePdf.renderPage(this.page);
      }
    },
    prev() {
      if (this.page > 1) {
        this.page--;
        this.$refs.vuePdf.renderPage(this.page);
      }
    },
    pdfError: function () {
      this.isError = true;
    },
    downLoadPdf: async function () {},
    downFile(blod, fsName = null) {
      // 如下方法 下载图片与pdf
      const url = window.URL.createObjectURL(new Blob([blod]));
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fsName);
      document.body.appendChild(link);
      link.click();
    },
    getOneFormInfo() {
      this.notSchema = false;
      this.getschema();
    },
    getschema() {
      // let self = this
      // this.axios({
      //   method: 'post',
      //   url: this.$config.schemaServer + 'api/getoneforminfo',
      //   data: {
      //     'uuid': this.schemaUuid
      //   }
      // }).then(data => {
      //   self.oneFormInfo = data.data[0]
      // })
      setTimeout(() => {
        this.oneFormInfo = JSON.parse(this.materialTemplateContent);
      });
    },
    showPdfOrImg() {
      this.notSchema = true;
    },
  },
  computed: {
    ispdf: function () {
      return true;
    },
    pdfDiv: function () {
      let pdfDiv = null;
      if (this.ispdf) {
        pdfDiv = document
          .getElementById("vuePdf")
          .getElementsByTagName("canvas")[0];
      } else {
        pdfDiv = document.getElementById("pdf_content_div");
      }
      return pdfDiv;
    },
  },
  watch: {
    src: function () {},
    printVisible: async function () {},
    zoom: function () {
      let pdfDiv = null;
      // 图片采用此方法控制放大缩小
      if (!this.ispdf) {
        pdfDiv = document.getElementById("pdf_content_div");
      }

      if (pdfDiv) {
        pdfDiv.style.width = this.width * (2 - this.zoom) + "px";
        // pdfDiv.style.height = this.height * (2 - this.zoom) + 'px'
      }
    },
    rotateNum: function () {
      if (!this.ispdf && this.pdfDiv) {
        this.pdfDiv.style.transform = "rotate(" + this.rotateNum + "deg)";
      }
    },
  },
  components: {
    pdf,
  },
  created() {},
  mounted() {
    http({
      url: "/video",
      method: "get",
      responseType: "arraybuffer",
    }).then((res) => {
      console.log(res);
    });
    http({
      url: "/video",
      method: "get",
      responseType: "blob",
    }).then((res) => {
      console.log(res);
    });
    console.log(this.$refs.vuePdf.total);
    this.total = this.$refs.vuePdf.total;
  },
};
</script>

<style lang="scss">
.pdf_main {
  border: 1px solid red;
  width: 500px;
  height: 500px;
  .pdf_dialog {
    .el-dialog {
      background-color: transparent;
      box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;
      width: 779px;
      height: 842px;
      .el-dialog__header {
        height: 0px;
        padding: 0px;
        border-bottom: none;
      }
      .el-dialog__body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .pdf_dialog_main {
        display: flex;
        flex-direction: row;

        &:hover .page_button {
          opacity: 1;
        }

        .page_button {
          transition: 0.3s;
          width: 60px;
          height: 60px;
          margin: auto;
          position: relative;
          top: 50%;
          margin-top: -30px;
          line-height: 60px;
          color: rgba(255, 255, 255, 0.5);
          font-size: 36px;
          text-align: center;
          border-radius: 60px;
          background-color: rgba(0, 0, 0, 0.3);
          opacity: 0;
        }
        .page_button-right {
          top: 46.8%;
        }
        .el-close {
          top: -20px;
          right: 13px;
        }
        .hoverClass:hover {
          background-color: rgba(0, 0, 0, 0.8);
        }
      }
      .el-pagination button {
        padding: 0 6px;
      }
      .pdf_content {
        width: 579px;
        height: 842px;
        display: flex;
        flex-direction: column;
        background-color: white;
        justify-content: space-between;
        position: relative;
        .tips {
          width: 360px;
          height: 30px;
          font-size: 20px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto auto;
        }
      }
      .pdf_left_btn {
        width: 100px;
      }
      .pdf_left_btn {
        width: 100px;
      }

      .pdf_div {
        margin: 25px 20px 0px 20px;
        flex: 1;
        overflow: auto;

        #vuePdf {
          position: relative;
          height: 100%;
        }

        .annotationLayer {
          width: 0px !important;
          height: 0px !important;
        }
      }
      .pdf_content:hover .pdfMenu {
        opacity: 1;
      }
      .pdf_footer {
        height: 60px;
        display: flex;
        flex-direction: row;

        .pdfMenu {
          opacity: 0;
          position: relative;
          left: 501px;
          width: 0;
          transition: 0.3s;

          > div {
            cursor: pointer;
            font-size: 22px;
            margin-bottom: 20px;
            width: 50px;
            height: 50px;
            color: white;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 50px;
            border-radius: 50px;
            transition: 0.3s;

            &:hover {
              background-color: rgba(0, 0, 0, 0.5);
            }
          }
        }
      }

      .bottom_page {
        flex: 1;
        // padding-left: 20px;
        position: absolute;
        bottom: 23px;
        // left: -20px;

        .el-pagination__editor {
          width: 50px;
        }
        .el-pagination span:not([class*="suffix"]) {
          height: 36px;
          line-height: 36px;
        }
      }

      .bottom_btn {
        z-index: 9;
        // text-align: right;
        // padding-right: 20px;
        position: absolute;
        right: 8px;
        bottom: 20px;
        margin-right: 20px;
        // width: 160px;
      }
    }
  }
  .audio_dialog {
    .audio_dialog_main {
      margin-bottom: 30px;
    }
    .audio_dialog_btn {
      z-index: 9;
      text-align: right;
      padding-right: 20px;
      margin-top: 10px;
      .el-button {
        background: #f7fcfc;
        border: 1px solid #c1efeb;
        color: #000000;
        border-radius: 3px;
        padding: 0 15px;
        line-height: 30px;
        height: 30px;
        &:hover {
          color: #fff;
          background-color: #305fd0;
          transition: none;
        }
        &:active {
          background-color: #008377;
        }
      }
    }
  }
  /* modal 弹出位置 */
  .el-dialog__wrapper {
    text-align: center;
    white-space: inherit;
  }

  .el-dialog {
    position: initial;
  }

  .el-dialog__wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
  }

  .el-dialog__wrapper .el-dialog {
    display: inline-block;
    vertical-align: middle;
    top: 0;
    text-align: left;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px !important;
    transform: none;
    // position: initial;
    left: 0;
  }

  .el-dialog__body {
    padding: 0px;
  }
  /* modal 弹出位置 --end */
}
</style>
